<template>
    <div class="el-Map" style="height:800px;width: 100%">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center"  :events="events" class="amap-demo" :plugin="plugin">
        <!--<el-amap-info-window  :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>-->
        <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
        <!--<el-amap-circle :center="circle.center" :radius="circle.radius" :fillOpacity="circle.fillOpacity" :events="circle.events" :strokeColor="circle.strokeColor" :strokeStyle="circle.strokeStyle" :fillColor="circle.fillColor"></el-amap-circle>-->
      </el-amap>
    </div>
</template>

<script>
    export default {
      watch:{
        center(){
          this.$emit('childByValue', this.center)
        }
      },
      data () {
        return {
          zoom: 15,
          center: [121.5273285, 31.21515044],
          marker: {
            position: [121.5273285, 31.21515044],
            events: {
              click: () => {
                alert(1)
                if (this.mywindow.visible === true) {
                  this.mywindow.visible = false
                } else {
                  this.mywindow.visible = true
                }
              },
              dragend: (e) => {
                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
              }
            },
            visible: true,
            draggable: false
          },
          mywindow: {
            position: [121.5273285, 31.21515044],
            content: '<h4>该点数据信息</h4><div class="text item">Information A: ...</div><div class="text item">Information B: ...</div>',
            visible: true,
            events: {
              close () {
                this.mywindow.visible = false
              }
            }
          },
          plugin: {
            pName: 'Scale',
            events: {
              init (instance) {
                console.log(instance)
              }
            }
          },
          events: {
            click: (e) => {
              console.log(1)
              this.marker.position = [e.lnglat.lng, e.lnglat.lat]
              // this.mywindow.position = [e.lnglat.lng, e.lnglat.lat]
              this.center= [e.lnglat.lng, e.lnglat.lat]
              // this.circle.center=[e.lnglat.lng, e.lnglat.lat]
              // this.mywindow.visible = true
            }
          }
        }
      }
    }
</script>

<style scoped>
  .amap-page-container {
    height: 500px;
  }
</style>
